<template>
  <div class="standard-grid --padding-horizontal --auto-rows skin-index">
      <div class="skin-index__container">
        <div class="skin-index__box" v-for="(item, index) in themes" :key="index" @click="changeTheme(index)">
           <div :class="'--theme'+index">
             <span v-show="item.isSelected"><img src="../../assets/imgs/icons/selected.svg" alt=""></span>
           </div>
          <p>{{item.text}}</p>

        </div>
      </div>
  </div>
</template>
<script lang="ts">
  import Vue from 'vue'
  import Component from 'vue-class-component'
  import {Prop} from "vue-property-decorator";
  import {Actions} from "../../enums/Store";


  @Component({
    components:{

    }
  })
  export default class CollectIndex extends Vue {
    @Prop({required:true})skinValue
    private themes=[
      {value:'0',isSelected:false,text:'默认'},
      {value:'1',isSelected:false,text:'复古'},
      {value:'2',isSelected:false,text:'成熟'},
      {value:'3',isSelected:false,text:'酷黑'}
    ]

    private changeTheme(value){
       this.themes.map((item,index)=>{
          if(value==item.value){
            item.isSelected=true
            this.$store.dispatch(Actions.GetSkin,value)
            localStorage.setItem('themesBg',value)
          }else{
            item.isSelected=false
          }
       })
      this.$router.go({
        name:this.$route.path
      })
    }

    private mounted(){
       this.themes.map((item,index)=>{
         item.isSelected = item.value == this.skinValue

      })

    }
    //
    // get skin(){
    //   if(process.browser){
    //     if(localStorage.getItem('themesBg')){
    //       return localStorage.getItem(("themesBg"))
    //     }
    //     return localStorage.setItem("themesBg",'0')
    //   }
    // }
    //
    // @Watch('skin',{immediate:true,deep:true})
    //  private athemesData(val:string,oldVal:string){
    //      this.themes.map((item,index)=>{
    //        if(val==item.background){
    //          item.isSelected=true
    //          localStorage.setItem('themesBg',item.background)
    //        }else{
    //          item.isSelected=false
    //        }
    //      })
    // }

  }
</script>
<style lang="scss">
  @include component(skin-index){
    @extend %padding;

    @include part(container){
      grid-column: 1 / 2 span;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
    }

    @include part(box){
       width: 30%;
      @include loop-breakpoints{
        height: #{$gridel-row-height*8+rem};
      }

      &:nth-of-type(n+4){
        margin-top: $mobile-row-2;
      }

      div{
        height: 80%;

        border-radius: 10px;
        color: $color-fff;
        display: flex;
        justify-content: center;
        align-items: center;

        @include option(theme0){
          background: #054547;
        }
        @include option(theme1){
          background: #5F5636 !important;
        }
        @include option(theme2){
          background: rgb(116, 3, 73);
        }
        @include option(theme3){
          background: #000;
        }

       }

      p{
        text-align: center;
        color: #909399;
        @include baseline($font-size-1,$skip:1)
      }

    }

  }
</style>
